<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>开检查单</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
  <link rel="stylesheet" href="../../layuiadmin/style/template.css" media="all">
</head>
<body>

  <div class="layui-fluid">
    <div class="layui-row layui-col-space15">
    
    <!-- 第一行模块开始 -->
    <div class="layui-col-md6">
        <div class="layui-card">
        
          <div class="layui-card-header">检查开单</div>
          <div class="layui-card-body">
          	<!-- 搜索框开始 -->
          	<form action="" class="layui-form" method="post">
				<div class="layui-form-item">
					<div class="layui-inline">
						<label class="layui-form-label">搜索检查项</label>
						<div class="layui-input-inline">
							<input name="examNameContent" class="layui-input" type="text" autocomplete="off">
						</div>
					</div>
					<button class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-search" type="submit" lay-filter="doSearch" id="doSearch" lay-submit="">查询</button>
					<button class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" type="reset">重置</button>
				</div>
			</form>
			
          	<!-- 搜索框结束 -->
          	<!-- 检查项数据开始 -->
          	<table class="layui-hide" id="examItemTable" lay-filter="examItemTable" ></table>
          	<!-- 检查项数据结束 -->
          	<!-- 选择按钮开始 -->
          	<div style="display: none;" id="rightToolBar">
				<button class="layui-btn layui-btn-sm" type="button" lay-event="select">选择</button>
			</div>
			<!-- 选择按钮结束 -->
			</div>
		</div>
	</div>

	<div class="layui-col-md6">
        <div class="layui-card">
        <div class="layui-card-header">检查项</div>
          <div class="layui-card-body" style="height:300px">
          <blockquote class="layui-elem-quote" style="margin:20px">请确认需要检查的项目</blockquote>
			<!-- 被选择的检查项开始 -->
			<table class="layui-table">
			  
			  <thead>
			    <tr>
			      <th>昵称</th>
			      <th>加入时间</th>
			      <th>签名</th>
			    </tr> 
			  </thead>
			  <tbody id="examNames">
			    <!-- <tr style="height:30px">
			      <td>贤心</td>
			      <td>2016-11-29</td>
			      <td>人生就像是一场修行</td>
			    </tr> -->
			    
			  </tbody>
			</table>
			<!-- 确认检查项的按钮 -->
			<div style="text-align:center">
				<button id="comfirmExamNames" class="layui-btn layui-btn-sm" type="button">确认</button>
				<button id="lookupResult" class="layui-btn layui-btn-sm" type="button">查看检查结果</button>
			</div>
			<!-- 被选择的检查项结束 -->
			</div>
			</div>
			</div>
			
    <!-- 第一个模块结束 -->
    
    
    <!-- 第二个模块开始 -->
    <div class="layui-col-md12">
        <div class="layui-card">
        
        
          <div class="layui-card-header">查看检查结果</div>
          <div class="layui-card-body">
          	<table class="layui-hide" id="resultsTable" lay-filter="resultsTable" ></table>
		  </div>
		  </div>
	</div>
    <!-- 第二个模块结束 -->
    
    
    </div>
   </div>
   <!-- 隐藏域，存放检查单号 -->       
   <input name="examinationId" id="examinationId" type="text" style="display:none"/>

	<script src="../../layuiadmin/layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript">
		layui.use(['element','jquery','form','table'],function(){
			var $ = layui.jquery;
			var element=layui.element;
			var form=layui.form;
			var table =layui.table;
			
			//渲染表格
			table.render({
				elem : '#examItemTable',
				url : '/examination/allExaminationName',
				title : '检查项目表',
				height: '240',
				skin: 'row',
				even: true,//开启隔行背景
				cols : [ [

				{
					field : 'examNameId',
					title : 'ID',
					width : 120,
					fixed : 'left',
					align : 'center'
				},{
					field : 'examNameContent',
					title : '检查项目名称',
					width : 150
				},  {
					field : 'examNamePrice',
					title : '检查价格',
					width : 130
				}, {
					fixed : 'right',
					align : 'center',
					toolbar : '#rightToolBar'
				}

				] ]

			});
			
			//触发搜索框表单提交
			form.on("submit(doSearch)",function(data){
				//alert("doSearch");
				//alert(data);
				$.ajax({
					url:'/examination/searchExaminationName',
					contentType:'application/json;charset=utf-8',
					type:"post",
					data:JSON.stringify(data.field),
					//获得搜索结果后重新渲染表格
					success:function(res){
						console.log(res);
						//渲染表格
						table.render({
							elem : '#examItemTable',
							//url : '/examination/allExaminationName',
							data:res.data,
							title : '检查项目表',
							height: '240',
							skin: 'row',
							even: true,//开启隔行背景
							cols : [ [

							{
								field : 'examNameId',
								title : 'ID',
								width : 200,
								fixed : 'left',
								align : 'center'
							},{
								field : 'examNameContent',
								title : '检查项目名称',
								width : 130
							},  {
								field : 'examNamePrice',
								title : '检查价格',
								width : 160
							}, {
								fixed : 'right',
								align : 'center',
								toolbar : '#rightToolBar'
							}

							] ]

						});
					}
				}); 
				return false;
			});
			
			//行中工具条事件
			table.on('tool(examItemTable)', function(obj) { //注：tool 是工具条事件名，userTable 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

				if (layEvent === 'select') { 
					//将该行数据添加到table中
					var row = getDataRow(data);
					document.getElementById("examNames").appendChild(row);
					
				}
			});
			//点击确认检查项的按钮
			$(document).on('click','#comfirmExamNames',function(){
				var examNameIds="";
				var examNames = document.getElementById("examNames").getElementsByTagName('td');
				//console.log(examNames);
				for(var i=0;i<examNames.length;i++){
					if(i%3==0){
						var curr = examNames[i].innerHTML;
						//console.log(curr);
						examNameIds = examNameIds+curr+',';
					}
				}
				//获得当前的门诊号
				var storeData = window.localStorage ? localStorage.getItem("localName"):Cookie.read("localName");
				//alert(storeData);
				var arrStoreData = storeData.split(",");
				var outpatientId = arrStoreData[0];
				$.ajax({
					url:"/examination/addExamination?examNameIds="+examNameIds+"&outpatientId="+outpatientId,
					contentType:'application/json;charset=utf-8',
					type:"post",
					//data:JSON.stringify(data.field),
					success:function(res){
						$("#examinationId").val(res);
						alert("保存成功");
					}
				});
			
			})
			
			//定义生成一行数据的方法
			function getDataRow(h){
				var row = document.createElement("tr");
				//第一列
				var idCell = document.createElement("td");
				idCell.innerHTML = h.examNameId;
				row.appendChild(idCell);
				//第二列
				var contentCell = document.createElement("td");
				contentCell.innerHTML = h.examNameContent;
				row.appendChild(contentCell);
				//第三列
				var priceCell = document.createElement("td");
				priceCell.innerHTML = h.examNamePrice;
				row.appendChild(priceCell);
				return row;
			}
			
			//点击查看检查结果按钮
			$("#lookupResult").click(function(){
				var examId = $("#examinationId").val();
				//alert(examId);
				//渲染表格
				table.render({
					elem : '#resultsTable',
					url : '/examination/findAllExamResultByExamId?examinationId='+examId,
					title : '检查结果目表',
					height: '240',
					skin: 'row',
					even: true,//开启隔行背景
					cols : [ [

					{
						field : 'examResultId',
						title : '检查结果ID',
						width : 200
						
					},{
						field : 'examItemId',
						title : '检查条目',
						width : 160
					},{
						field : 'examResultTime',
						title : '检查时间',
						width : 170
					},{
						field : 'result',
						title : '检查结果',
						width : 190
					},{
						field : 'examResultOpinion',
						title : '检查意见',
						width : 200
					}, {
						field : 'note',
						title : '注意事项',
						width : 200
					}

					] ]

				});
			});
			
		});
		
	</script>
	
	
</body>
</html>